<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id="app">
        <!-- 在组件上叠加的class会被其模板继承 -->
        <my-component name="wangermazi" class="baz boo" :age="18"></my-component>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isActive: 123
                }
            }
        })

        // this.$attrs 指当前组件实例身上的所有非props属性
        // this.$attrs.class 即模板上传入的"baz boo"
        // 当组件有多个根元素时 哪个元素想获取定义在组件身上的class 就必须要显式地写出来
        app.component('my-component', {
            template: `    
            <p>Hi!</p>
            <span :class="$attrs.class">
                This is a child component
                <h6 :class="$attrs.class">泥煤</h6>
            </span>
            `,
            props:['name']
        })

        app.mount("#app")
    </script>
</body>

</html>